<template>
	<view class="my-login">
		<button type="primary" class="btn-login"  @getphonenumber="getPhoneNumber" open-type="getPhoneNumber">
		  <uni-icons style="margin-top: 2rpx;" type="person" color="#FFFFFF" size="20"/>
		  <text class="denglu">手机号授权登录</text>
		</button>
	</view>
</template>

<script>
  // 引入vuex里的方法
  import {mapMutations} from 'vuex'
	export default {
		data() {
			return {

			};
		},
    onShow() {
      // uni.login({
      //   success: res => {
      //     const query = {
      //       code: res.code,
      //       iv: "",
      //       encryptedData: "",
      //       openId: ""
      //     }
      //     wxPreLogin(query).then(body => {
      //       console.log(222,body)
      //       that.openId = body.openId;
      //     })
      //   }
      // })
    },
    methods:{
      // 展开供其他函数调用
      ...mapMutations('m-user', ['updateUserinfo', 'updateToken']),
      getPhoneNumber(e) {
        console.log(e.detail);
        // if (!this.openId) {
        //   return uni.$showMsg('获取openId失败，请稍后再试！')
        // }
        const that = this;
        if(e.detail.errMsg=='getPhoneNumber:ok'){
          // #ifdef MP-WEIXIN
          const query2 = {
            code: '',
            iv: e.detail.iv,
            encryptedData: e.detail.encryptedData
            // openId: that.openId
          }
          // wxLogin(query2).then(body => {
          //   this.updateToken(body.loginToken)
          //   this.updateUserinfo({
          //     memberId: body.memberId,
          //     nickName: body.nickname,
          //     openId: body.openId,
          //     mobile: body.mobile,
          //     avatarUrl: body.headImage
          //   })
          // })
          // #endif
        }else{
          // return uni.$showMsg('您取消了登录授权！')
        }
      },
      getlogin(){}
    }
	}
</script>

<style lang="less" scoped>
  .my-login{
    width: 100%;
    height: 100%;
  }
  .btn-login {
    width: 456rpx;
    height: 71rpx;
    line-height: 70rpx;
    border-radius: 100px;
    // margin: 80rpx 0;
    background-color: #28C445;
    box-sizing: border-box;
    .denglu{
      margin: 0 27rpx;
    }
  }
  .btn-alipay-login {
    width: 356rpx;
    height: 71rpx;
    line-height: 70rpx;
    border-radius: 100px;
    // margin: 80rpx 0;
    background-color: #468dd3;
    box-sizing: border-box;
    .denglu{
      margin: 0 27rpx;
    }
  }
</style>
